<template>
  <div class="foster_order">
    <div class="top"></div>
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="goBack" fixed />

    <!-- 轮播图 -->
    <van-swipe @change="onChange" :loop="true" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div
          class="swipe-image"
          :style="{ backgroundImage: 'url(' + image + ')' }"
        ></div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          总览&nbsp;{{ current + 1 }}/{{ images.length }}
        </div>
      </template>
    </van-swipe>

    <!-- 订单详情 -->
    <div class="order-detail">
      <div class="center">
        <div class="line1">
          <div class="title">{{ getData.fosterName }}</div>
          <div class="score">
            <img
              src="../../assets/icon/forst-icon2.png"
              alt=""
              class="score-img"
            />
            <span class="score-text">{{ getData.fosterScore }}</span>
          </div>
        </div>
        <div class="line2">
          <div class="price">
            ￥<span>{{ getData.fosterPrice }}</span
            >/天
          </div>
          <div class="city">
            <img src="../../assets/icon/loc.png" alt="" />
            <span>{{ getData.fosterCity }}</span>
          </div>
        </div>
        <div class="tags">
          <span
            :class="'tag' + (index + 1)"
            v-for="(tag, index) in tags"
            :key="index"
            >{{ tag }}</span
          >
        </div>
      </div>
    </div>

    <!-- 夹层 -->
    <div class="middle"></div>

    <!-- 概览 -->
    <div class="view">
      <div class="center">
        <div class="view-title">
          <div class="my-icon"></div>
          <span>概览</span>
        </div>

        <div class="tags">
          <div class="tag">
            <img src="../../assets/icon/area.png" alt="" />
            <div class="tag-text">{{ getData.fosterArea }}㎡</div>
          </div>
          <div class="tag">
            <img src="../../assets/icon/rooms.png" alt="" />
            <div class="tag-text">{{ getData.fosterRoom }}</div>
          </div>
          <div class="tag">
            <img src="../../assets/icon/balcony.png" alt="" />
            <div class="tag-text">封闭阳台</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 标准 -->
    <div class="standard">
      <div class="center">
        <div class="title">
          <div class="my-icon"></div>
          <span>平台寄养标准</span>
        </div>

        <div class="content">
          <div class="text">①&nbsp;定期接受资格审查及备案</div>
          <div class="text">②&nbsp;保持通风卫生,封窗、无安全隐患</div>
          <div class="text">③&nbsp;不超过既定寄养数量上限</div>
          <div class="text">④&nbsp;定时为猫咪补充饮用水及宠主自备宠粮</div>
          <div class="text">⑤&nbsp;定期向宠主反馈视频/图片</div>
          <div class="text">⑥&nbsp;具备基础护理能力</div>
        </div>
      </div>
    </div>

    <!-- 可提供 -->
    <div class="supply">
      <div class="center">
        <div class="title">
          <div class="my-icon"></div>
          <span>可提供</span>
        </div>

        <div class="tags">
          <div class="tag">
            <img src="../../assets/icon/water.png" alt="" />
            <div class="tag-text">干净饮用水</div>
          </div>
          <div class="tag">
            <img src="../../assets/icon/disinfect.png" alt="" />
            <div class="tag-text">消毒猫砂盆</div>
          </div>
          <div class="tag">
            <img src="../../assets/icon/toy.png" alt="" />
            <div class="tag-text">玩具</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 寄养要求 -->
    <div class="request">
      <div class="center">
        <div class="title">
          <div class="my-icon"></div>
          <span>寄养要求</span>
        </div>

        <div class="tags">
          <div class="tag">
            <img class="" src="../../assets/icon/checked.png" alt="" />
            <span class="tag-text">出示疫苗本</span>
          </div>
          <div class="tag">
            <img class="" src="../../assets/icon/checked.png" alt="" />
            <span class="tag-text">无传染病史，定期内外驱虫</span>
          </div>
          <div class="tag">
            <img class="" src="../../assets/icon/checked.png" alt="" />
            <span class="tag-text">宠物无攻击性</span>
          </div>
          <div class="tag">
            <img class="" src="../../assets/icon/checked.png" alt="" />
            <span class="tag-text">宠物大于3个月、非妊娠期</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 须知 -->
    <div class="notice">
      <div class="center">
        <div class="title">
          <div class="my-icon"></div>
          <span>预定须知</span>
        </div>

        <div class="content">
          <div class="text">寄养入住时间：当天12:00后</div>
          <div class="text">寄养结束时间：当天12:00后</div>
          <div class="text">寄养期间宠主务必保持电话畅通</div>
        </div>
      </div>
    </div>

    <div class="bottom"></div>

    <!--底部预定部分 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-button
        @click="go"
        color="#f8e176"
        type="warning"
        text="立即预定"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { get } from "@/utils/storage";
export default {
  data() {
    return {
      current: 0,
      getData: [],
      images: [],
      tags: [],
    };
  },
  watch: {
    getData(newValue, oldValue) {
      this.images.push(newValue.fosterCoverPic);
      this.images.push(newValue.fosterBalconyPic);
      // console.log(this.images);
      this.tags = newValue.fosterTags.split(",");
      // console.log(this.tags);
    },
  },
  mounted() {
    let fid = this.$route.query.fid;
    // console.log(fid);
    this.axios.get(`http://120.79.2.254:3000/fosterID?fid=${fid}`).then((res) => {
      // console.log("详情:", res.data.results);
      this.getData = res.data.results;
    });
  },
  methods: {
    go() {
      this.$router.push("/petshopping");
    },
    // 返回首页
    goBack() {
      this.$router.push("/foster");
    },
    // 轮播图
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.foster_order {
  background-color: #f2f2f2;
  // width: 100vw;
  // height: 100%;
}
.top {
  padding-top: 46px;
}
.bottom {
  height: 20vw;
}

// 左箭头
::v-deep .van-icon-arrow-left:before {
  color: #a7a7a7;
}

// 轮播图
.van-swipe-item {
  width: 100vw;
  height: 100vw;
  position: relative;
}
.swipe-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
.custom-indicator {
  position: absolute;
  bottom: 15vw;
  left: 10vw;
  color: #fff;
  font-size: 1.1rem;
}

// 订单详情
.order-detail {
  width: 100vw;
  position: absolute;
  top: 100vw;
  left: 0;
  padding-bottom: 7vw;
  // height: 34vw;
  background-color: #fff;
  border-radius: 8vw 8vw 0 0;
  margin: auto;
  margin-bottom: 1vw;
  box-shadow: 0px 0px 6px #ccc;
  .center {
    margin: auto;
    width: 90%;
    .line1 {
      position: relative;
      margin-top: 5vw;
      margin-bottom: 5vw;
      .title {
        font-size: 1rem;
        color: #000;
        font-weight: bold;
        margin-right: 2vw;
      }
      .score {
        position: absolute;
        top: -1.2vw;
        right: 38vw;
        z-index: 10;
        background-color: #f2f2f2;
        border-radius: 1.5vw;
        padding: 0.6vw 1.2vw;
        line-height: 5vw;
        .score-img {
          width: 3vw;
          margin-right: 0.6vw;
        }
        .score-text {
          font-size: 0.8rem;
          font-weight: bold;
          vertical-align: middle;
        }
      }
    }
    .line2 {
      height: 3vw;
      line-height: 3vw;
      display: flex;
      margin-bottom: 5vw;
      font-size: 0.8rem;
      color: #666;
      .price {
        margin-right: 5vw;
        span {
          font-weight: bold;
          font-size: 1rem;
          color: #000;
        }
      }
      .city {
        font-size: 0.7rem;
        color: #a7a7a7;
        img {
          width: 3.5vw;
          margin-top: -0.5vw;
          margin-right: 0.5vw;
        }
      }
    }
    .tags {
      font-size: 0.8rem;
      .tag1 {
        background-color: #efedfd;
        color: #8d73ec;
        padding: 1vw 2vw;
        border-radius: 1vw;
        margin-right: 2vw;
      }
      .tag2 {
        background-color: #edf5fd;
        color: #68badd;
        padding: 1vw 2vw;
        border-radius: 1vw;
        margin-right: 2vw;
      }
      .tag3 {
        background-color: #f2f2f2;
        color: #666;
        padding: 1vw 2vw;
        border-radius: 1vw;
        margin-right: 2vw;
      }
    }
  }
}

// 夹层
.middle {
  width: 100vw;
  height: 23vw;
  // background-color: pink;
}

// 概览
.view {
  width: 100vw;
  background-color: #fff;
  padding-top: 7vw;
  box-shadow: 0px 0px 6px #ccc;
  .center {
    width: 90%;
    margin: auto;
    margin-bottom: 5vw;
    .view-title {
      display: flex;
      margin-bottom: 5vw;
      .my-icon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #f8e176;
        margin-right: 3vw;
      }
      span {
        font-size: 1rem;
        font-weight: bold;
      }
    }
    .tags {
      display: flex;
      padding-bottom: 3vw;
      .tag {
        height: 15vw;
        text-align: center;
        margin-right: 10vw;
        img {
          width: 8vw;
          margin-bottom: 2.5vw;
        }
        .tag-text {
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// 标准
.standard {
  margin-top: -3vw;
  width: 100vw;
  background-color: #fff;
  padding-top: 7vw;
  padding-bottom: 2vw;
  margin-bottom: 2.2vw;
  box-shadow: 0px 0px 6px #ccc;
  .center {
    width: 90%;
    margin: auto;
    margin-bottom: 5vw;
    .title {
      display: flex;
      margin-bottom: 5vw;
      .my-icon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #f8e176;
        margin-right: 3vw;
      }
      span {
        font-size: 1rem;
        font-weight: bold;
      }
    }
    .content {
      color: #666;
      font-size: 0.9rem;
      .text {
        margin-bottom: 3vw;
      }
    }
  }
}

// 可提供
.supply {
  width: 100vw;
  background-color: #fff;
  padding-top: 7vw;
  box-shadow: 0px 0px 6px #ccc;
  .center {
    width: 90%;
    margin: auto;
    margin-bottom: 5vw;
    .title {
      display: flex;
      margin-bottom: 5vw;
      .my-icon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #f8e176;
        margin-right: 3vw;
      }
      span {
        font-size: 1rem;
        font-weight: bold;
      }
    }
    .tags {
      display: flex;
      padding-bottom: 3vw;
      .tag {
        height: 15vw;
        text-align: center;
        margin-right: 10vw;
        img {
          width: 8vw;
          margin-bottom: 2.5vw;
        }
        .tag-text {
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// 寄养要求
.request {
  width: 100vw;
  background-color: #fff;
  padding-top: 7vw;
  margin-top: -2.5vw;
  box-shadow: 0px 0px 6px #ccc;
  .center {
    width: 90%;
    margin: auto;
    margin-bottom: 5vw;
    .title {
      display: flex;
      margin-bottom: 5vw;
      .my-icon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #f8e176;
        margin-right: 3vw;
      }
      span {
        font-size: 1rem;
        font-weight: bold;
      }
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 3vw;
      .tag {
        height: 9vw;
        text-align: center;
        margin-right: 10vw;
        img {
          width: 4.5vw;
          margin-right: 0.5vw;
          // margin-bottom: 2.5vw;
        }
        .tag-text {
          color: #666;
          font-size: 0.8rem;
          vertical-align: middle;
        }
      }
    }
  }
}

// 须知
.notice {
  width: 100vw;
  background-color: #fff;
  padding-top: 7vw;
  box-shadow: 0px 0px 6px #ccc;
  padding-bottom: 2vw;
  margin-top: -2.5vw;
  margin-bottom: -7vw;
  .center {
    width: 90%;
    margin: auto;
    margin-bottom: 5vw;
    .title {
      display: flex;
      margin-bottom: 5vw;
      .my-icon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #f8e176;
        margin-right: 3vw;
      }
      span {
        font-size: 1rem;
        font-weight: bold;
      }
    }
    .content {
      color: #666;
      .text {
        line-height: 8vw;
      }
    }
  }
}
</style>